<template>
    <div class="col-xl-9 col-lg-8">
        <div class="product-filter-heading">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <!--                                    <h2 class="item-title">Showing 1–9 of 16 results</h2>-->
                </div>
                <div class="col-md-6 d-flex justify-content-md-end justify-content-center">
                    <div class="product-sorting">
                        <div class="ordering-controller">
                            <button class="ordering-btn dropdown-toggle" type="button"
                                    data-toggle="dropdown" aria-expanded="false">
                                排序方式
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">时间</a>
                                <a class="dropdown-item" href="#">数量多</a>
                                <a class="dropdown-item" href="#">数量少</a>
                                <a class="dropdown-item" href="#">价格高</a>
                                <a class="dropdown-item" href="#">价格低</a>
                            </div>
                        </div>
                        <div class="layout-switcher">
                            <ul>
                                <li class="active">
                                    <a href="#" data-type="product-box-list"
                                       class="product-view-trigger">
                                        <i class="fas fa-th-list"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="product-view-trigger" href="#"
                                       data-type="product-box-grid">
                                        <i class="fas fa-th-large"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="product-view" class="product-box-list">
            <div class="row">
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1 top-rated-grid">
                                <div class="item-img">
                                    <a href="single-product1.html" class="item-trending"><img
                                            src="media/product/product18.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">Galaxy
                                        Note</a><span>New</span></h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>3 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>New Jersey, Cape
                                            May
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        1,240
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3 top-rated-list">
                                <div class="item-img">
                                    <a href="single-product1.html" class="item-trending"><img
                                            src="media/product/product19.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">Galaxy
                                            Note</a><span>New</span></h3>
                                        <ul class="item-condition">
                                            <li><span>Condition:</span> New</li>
                                            <li><span>Brand:</span> Other Brand</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            sed do dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>3 months ago</li>
                                            <li><i class="fas fa-map-marker-alt"></i>New Jersey,
                                                Cape May
                                            </li>
                                            <li><i class="far fa-eye"></i>86 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            1,240
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1 top-rated-grid">
                                <div class="item-img">
                                    <a href="single-product1.html" class="item-trending"><img
                                            src="media/product/product14.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">HD Camera
                                        5100</a><span>New</span></h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>4 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>Kansas, Hutchinson
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        1,780
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3 top-rated-list">
                                <div class="item-img">
                                    <a href="single-product1.html" class="item-trending"><img
                                            src="media/product/product23.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">HD
                                            Camera 5100</a><span>New</span></h3>
                                        <ul class="item-condition">
                                            <li><span>Brand:</span> Other Brand</li>
                                            <li><span>Condition:</span> New</li>
                                            <li><span>Item Type:</span> Digital Camera</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>3 months ago</li>
                                            <li><i class="fas fa-map-marker-alt"></i>Kansas,
                                                Hutchinson
                                            </li>
                                            <li><i class="far fa-eye"></i>61 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            1,780
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product1.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">HD 27 inch
                                        Mac 1 year used only</a><span>New</span></h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>4 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>Port Chester, New
                                            York
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        2,500
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product9.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">HD 27
                                            inch Mac 1 year used only</a><span>New</span></h3>
                                        <ul class="item-condition">
                                            <li><span>Brand:</span> Other Brand</li>
                                            <li><span>Condition:</span> New</li>
                                            <li><span>Item Type:</span> Digital Camera</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            sed do dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>3 months ago</li>
                                            <li><i class="fas fa-map-marker-alt"></i>Port Chester,
                                                New York
                                            </li>
                                            <li><i class="far fa-eye"></i>126 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            2,500
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product2.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">New Banded
                                        Smart Watch</a><span>New</span></h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>4 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>Kansas, Emporia
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        47
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product10.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">New
                                            Banded Smart Watch</a><span>New</span></h3>
                                        <ul class="item-condition">
                                            <li><span>Device Type:</span> Laptop</li>
                                            <li><span>Condition:</span> New</li>
                                            <li><span>Model:</span> ZX-4356</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            et dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>3 months ago</li>
                                            <li><i class="fas fa-map-marker-alt"></i>Kansas, Emporia
                                            </li>
                                            <li><i class="far fa-eye"></i>78 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            47
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1">
                                <div class="item-img">
                                    <a href="single-product1.html" class="item-trending"><img
                                            src="media/product/product3.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">High
                                        quality brand new headphone</a><span>New</span></h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>4 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>New York, Mineola
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        15
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3">
                                <div class="item-img">
                                    <a href="single-product1.html" class="item-trending"><img
                                            src="media/product/product11.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">High
                                            quality brand new headphone</a><span>New</span></h3>
                                        <ul class="item-condition">
                                            <li><span>Condition:</span> Used</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>3 months ago</li>
                                            <li><i class="fas fa-map-marker-alt"></i>New York,
                                                Mineola
                                            </li>
                                            <li><i class="far fa-eye"></i>40 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            15
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product4.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">Running
                                        shoes imported from china</a><span>New</span></h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>4 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>California,
                                            Bakersfield
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        36
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product12.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">Running
                                            shoes imported from china</a><span>New</span></h3>
                                        <ul class="item-condition">
                                            <li><span>Equipment Type:</span> Football</li>
                                            <li><span>Condition:</span> New</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>3 months ago</li>
                                            <li><i class="fas fa-map-marker-alt"></i>California,
                                                Bakersfield
                                            </li>
                                            <li><i class="far fa-eye"></i>95 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            36
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product5.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">Team
                                        Jersey available in reasonable price</a><span>New</span>
                                    </h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>4 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>New Jersey,
                                            Bloomfield
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        90
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product13.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">Team
                                            Jersey available in reasonable price</a><span>New</span>
                                        </h3>
                                        <ul class="item-condition">
                                            <li><span>Equipment Type:</span> Fitness / gym</li>
                                            <li><span>Condition:</span> New</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>3 months ago</li>
                                            <li><i class="fas fa-map-marker-alt"></i>New Jersey,
                                                Bloomfield
                                            </li>
                                            <li><i class="far fa-eye"></i>29 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            90
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product6.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">Export
                                        quality bag pack wholesale min 100 pcs</a><span>New</span>
                                    </h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>4 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>Louisiana, Bogalusa
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        180
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product20.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">Export
                                            quality bag pack wholesale min 100
                                            pcs</a><span>New</span></h3>
                                        <ul class="item-condition">
                                            <li><span>Condition:</span> New</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>3 months ago</li>
                                            <li><i class="fas fa-map-marker-alt"></i>Louisiana,
                                                Bogalusa
                                            </li>
                                            <li><i class="far fa-eye"></i>273 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            180
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product7.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">Ultrabook
                                        2018 core i7 with 16 GB RAM</a><span>New</span></h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>4 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>Kansas, Abilene
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        1,300
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product21.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">Ultrabook
                                            2018 core i7 with 16 GB RAM</a><span>New</span></h3>
                                        <ul class="item-condition">
                                            <li><span>Device Type:</span> Laptop</li>
                                            <li><span>Condition:</span> New</li>
                                            <li><span>Model:</span> ZX-4356</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>3 months ago</li>
                                            <li><i class="fas fa-map-marker-alt"></i>Kansas, Abilene
                                            </li>
                                            <li><i class="far fa-eye"></i>280 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            1,300
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product8.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">Toy
                                        Bundle</a><span>New</span></h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>4 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>New York, Brooklyn
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        230
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product22.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">Toy
                                            Bundle</a><span>New</span></h3>
                                        <ul class="item-condition">
                                            <li><span>Device Type:</span> Laptop</li>
                                            <li><span>Condition:</span> New</li>
                                            <li><span>Model:</span> ZX-4356</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>4 months ago</li>
                                            <li><i class="far fa-eye"></i>26 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            230
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product4.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">Running
                                        shoes imported from china</a><span>New</span></h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>4 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>California,
                                            Bakersfield
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        36
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product12.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">Running
                                            shoes imported from china</a><span>New</span></h3>
                                        <ul class="item-condition">
                                            <li><span>Equipment Type:</span> Football</li>
                                            <li><span>Condition:</span> New</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>3 months ago</li>
                                            <li><i class="fas fa-map-marker-alt"></i>California,
                                                Bakersfield
                                            </li>
                                            <li><i class="far fa-eye"></i>95 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            36
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="product-grid-view">
                        <div class="grid-view-layout1">
                            <div class="product-box-layout1">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product5.jpg" alt="Product"></a>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title"><a href="single-product1.html">Team
                                        Jersey available in reasonable price</a><span>New</span>
                                    </h3>
                                    <ul class="entry-meta">
                                        <li><i class="far fa-clock"></i>4 months ago</li>
                                        <li><i class="fas fa-map-marker-alt"></i>New Jersey,
                                            Bloomfield
                                        </li>
                                    </ul>
                                    <div class="item-price">
                                        <span class="currency-symbol">$</span>
                                        90
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-list-view">
                        <div class="list-view-layout1">
                            <div class="product-box-layout3">
                                <div class="item-img">
                                    <a href="single-product1.html"><img
                                            src="media/product/product13.jpg" alt="Product"></a>
                                </div>
                                <div class="product-info">
                                    <div class="item-content">
                                        <h3 class="item-title"><a href="single-product1.html">Team
                                            Jersey available in reasonable price</a><span>New</span>
                                        </h3>
                                        <ul class="item-condition">
                                            <li><span>Equipment Type:</span> Fitness / gym</li>
                                            <li><span>Condition:</span> New</li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                            dolore magna aliqua. In eu mi bibendum neque
                                            egestas…</p>
                                        <ul class="entry-meta">
                                            <li><i class="far fa-clock"></i>3 months ago</li>
                                            <li><i class="fas fa-map-marker-alt"></i>New Jersey,
                                                Bloomfield
                                            </li>
                                            <li><i class="far fa-eye"></i>29 Views</li>
                                        </ul>
                                    </div>
                                    <div class="item-right">
                                        <div class="item-price">
                                            <span class="currency-symbol">$</span>
                                            90
                                        </div>
                                        <div class="item-btn">
                                            <a href="#">Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pagination-layout1">
            <div class="btn-prev disabled">
                <a href="#"><i class="fas fa-angle-double-left"></i>上一页</a>
            </div>
            <div class="page-number">
                <a href="#" class="active">1</a>
                <a href="#">2</a>
            </div>
            <div class="btn-next">
                <a href="#">下一页<i class="fas fa-angle-double-right"></i></a>
            </div>
        </div>
    </div>
</template>
